class Shape {
  constructor(selector) {
    // 获取canvas元素
    this.canvas = document.querySelector(selector);
    // 设置 canvas 的宽高
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    // 获取webgl上下文
    this.gl = this.canvas.getContext("webgl");
    // 初始化着色器
    this.initShader();
    // 链接程序
    this.initProgram();
    // 绘制
    this.initDraw();
  }
  initShader() {
    // 创建顶点着色器
    this.vShader = this.gl.createShader(this.gl.VERTEX_SHADER);
    // 顶点着色器代码
    this.gl.shaderSource(
      this.vShader,
      /* glsl*/ `
        attribute vec4 v_position;
        void main() {
          gl_Position = v_position;
          gl_PointSize = 20.0;
        }
      `
    );
    // 编译顶点着色器
    this.gl.compileShader(this.vShader);

    // 创建片元着色器
    this.fShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
    // 片元着色器代码
    this.gl.shaderSource(
      this.fShader,
      /* glsl*/ `
        void main() {
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
      `
    );
    // 编译片元着色器
    this.gl.compileShader(this.fShader);
  }
  initProgram() {
    // 创建程序对象
    this.program = this.gl.createProgram();
    // 将顶点着色器和片元着色器关联到程序对象中
    this.gl.attachShader(this.program, this.vShader);
    this.gl.attachShader(this.program, this.fShader);
    // 链接程序对象
    this.gl.linkProgram(this.program);
    // 使用程序对象
    this.gl.useProgram(this.program);
  }
  initDraw() {
    // 创建顶点数据
    this.position = this.gl.getAttribLocation(this.program, "v_position");
    // 创建数据缓冲区
    this.buffer = this.gl.createBuffer();
    // 绑定缓冲区
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);

    // 将顶点数据提供给attribute变量
    this.gl.vertexAttribPointer(
      this.position, //告诉attribute变量从缓冲区中获取数据
      2, // 每次迭代提供2个单位的数据
      this.gl.FLOAT, //数据类型
      false, //是否进行归一化
      0, // 步长，每次迭代需要获取多少个单位数据
      0 // 偏移量，从缓冲区中的第几个单位数据开始取数据
    );
    // 启用顶点属性
    this.gl.enableVertexAttribArray(this.position);
  }
  drawPoint(x, y) {
    this.vertices = [x, y]; // 创建一个点
    // 设置顶点数据
    this.gl.bufferData(
      this.gl.ARRAY_BUFFER,
      new Float32Array(this.vertices),
      this.gl.STATIC_DRAW // 静态绘制
    );
    // 绘制
    this.gl.drawArrays(this.gl.POINTS, 0, 1);
  }
  moveTo(x, y) {}
  lineTo(x, y) {}
  stroke() {}
}
